<template>
	<div class="pb50">
		<el-form size="small" ref="form" :model="form" label-width="150px">
			<el-form-item label="店内营业时间" prop="store_time"
				:rules="[{ required: true, message: '请选择店内营业时间', trigger: 'change' }]">
				<el-time-picker is-range v-model="form.store_time" range-separator="至" start-placeholder="开始时间"
					end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm" value-format="HH:mm">
				</el-time-picker>
			</el-form-item>
			<el-form-item label="自提营业时间" prop="pick_time"
				:rules="[{ required: true, message: '请选择自提营业时间', trigger: 'change' }]">
				<el-time-picker is-range v-model="form.pick_time" range-separator="至" start-placeholder="开始时间"
					end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm" value-format="HH:mm">
				</el-time-picker>
			</el-form-item>
			<el-form-item label="外卖营业时间" prop="delivery_time"
				:rules="[{ required: true, message: '请选择外卖营业时间', trigger: 'change' }]">
				<el-time-picker is-range v-model="form.delivery_time" range-separator="至" start-placeholder="开始时间"
					end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm" value-format="HH:mm">
				</el-time-picker>
			</el-form-item>
			<el-form-item label="外卖配送">
				<el-checkbox-group v-model="form.delivery_set">
					<el-checkbox v-for="(item,index) in deliver_type" :label="item.value" :key="index">{{item.name}}
					</el-checkbox>
				</el-checkbox-group>
				<div class="tips">注：外卖配送方式至少选择一个</div>
			</el-form-item>
			<el-form-item label="店内配置">
				<el-checkbox-group v-model="form.store_set">
					<el-checkbox v-for="(item,index) in store_type" :label="item.value" :key="index">{{item.name}}
					</el-checkbox>
				</el-checkbox-group>
				<div class="tips">注：店内用餐方式至少选择一个</div>
			</el-form-item>
			<el-form-item label="外卖包装费类型">
				<el-radio-group v-model="form.bag_type">
					<el-radio :label="0">按商品收费</el-radio>
					<el-radio :label="1">按单收费</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="form.bag_type==1" label="包装费" :rules="[{ required: true, message: '请输入包装费' }]"
				prop="bag_price">
				<div class=" d-s-c">
					<div class="max-w60">
						<el-input v-model="form.bag_price" type="number"></el-input>
					</div>
					<div class="ml10">元</div>
				</div>
			</el-form-item>
			<el-form-item label="店内包装费类型">
				<el-radio-group v-model="form.storebag_type">
					<el-radio :label="0">按商品收费</el-radio>
					<el-radio :label="1">按单收费</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="form.storebag_type==1" label="包装费" :rules="[{ required: true, message: '请输入包装费' }]"
				prop="bag_price">
				<div class=" d-s-c">
					<div class="max-w60">
						<el-input v-model="form.storebag_price" type="number"></el-input>
					</div>
					<div class="ml10">元</div>
				</div>
			</el-form-item>
			<el-form-item label="外卖配送范围" :rules="[{ required: true, message: '请输入外卖配送范围' }]" prop="delivery_distance">
				<div class=" d-s-c">
					<div class="max-w60">
						<el-input class="" v-model="form.delivery_distance" type="number"></el-input>
					</div>
					<div class="ml10">km</div>
				</div>
			</el-form-item>
			<el-form-item label="外卖配送费" :rules="[{ required: true, message: '请输入外卖配送费' }]" prop="shipping_fee">
				<div class=" d-s-c">
					<div class="max-w60">
						<el-input v-model="form.shipping_fee" type="number"></el-input>
					</div>
					<div class="ml10">元</div>
				</div>
			</el-form-item>
			<el-form-item label="最低消费" :rules="[{ required: true, message: '请输入最低消费' }]" prop="min_money">
				<div class=" d-s-c">
					<div class="max-w60">
						<el-input v-model="form.min_money" type="number"></el-input>
					</div>
					<div class="ml10">元</div>
				</div>
			</el-form-item>
			<!--提交-->
			<div class="common-button-wrapper">
				<el-button size="small" @click="cancelFunc">取消</el-button>
				<el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
	import SupplierApi from '@/api/supplier.js';
	import {
		formatModel
	} from '@/utils/base.js'
	export default {
		data() {
			return {
				/*表单对象*/
				form: {
					shop_supplier_id: 0,
					/*活动时间*/
					store_time: '',
					pick_time: '',
					delivery_time: '',
					bag_type: 0,
					bag_price: 0,
					storebag_type: 0,
					storebag_price: 0,
					delivery_distance: '',
					shipping_fee: 0,
					delivery_set: [],
					store_set: [],
					min_money: 0
				},
				deliver_type: [{
					'name': '外卖配送',
					'value': 10
				}, {
					'name': '到店自提',
					'value': 20
				}],
				store_type: [{
					'name': '打包带走',
					'value': 30
				}, {
					'name': '店内就餐',
					'value': 40
				}],
				/*是否正在加载*/
				loading: false
			};
		},
		created() {
			this.form.shop_supplier_id = this.$route.query.shop_supplier_id;
			this.getData();
		},
		methods: {
			/*获取参数*/
			getData() {
				let self = this;
				SupplierApi.getsetSupplier({
						shop_supplier_id: self.form.shop_supplier_id
					}, true)
					.then(res => {
						self.form = formatModel(self.form, res.data.model);
						self.form.delivery_set = res.data.model.delivery_set;
						// 转成整数，兼容组件
						for (let i = 0; i < self.form.delivery_set.length; i++) {
							self.$set(self.form.delivery_set, i, parseInt(self.form.delivery_set[i]));
						}
						self.form.store_set = res.data.model.store_set;
						// 转成整数，兼容组件
						for (let i = 0; i < self.form.store_set.length; i++) {
							self.$set(self.form.store_set, i, parseInt(self.form.store_set[i]));
						}
						console.log(self.form)
					})
					.catch(error => {

					});
			},
			/*提交表单*/
			onSubmit() {
				let self = this;
				let params = self.form;
				if (params.delivery_set.length < 1) {
					self.$message({
						message: '外卖配送至少选择一种！',
						type: 'warning'
					});
					return;
				}
				if (params.store_set.length < 1) {
					self.$message({
						message: '店内配置至少选择一种！',
						type: 'warning'
					});
					return;
				}
				self.$refs.form.validate(valid => {
					if (valid) {

						console.log(params)
						self.loading = true;
						SupplierApi.setSupplier(params, true)
							.then(data => {
								self.loading = false;
								self.$message({
									message: '恭喜你，设置成功',
									type: 'success'
								});
								self.cancelFunc();
							})
							.catch(error => {
								self.loading = false;
							});
					}
				});
			},
			/*取消*/
			cancelFunc() {
				this.$router.back(-1);
			}
		}
	};
</script>

<style>
	.max-w60 {
		max-width: 60px;
	}
</style>
